<template>
  <div>
    <!-- 面包屑导航 -->
    <el-bread-crumb secondtitle="商品管理" thirdtitle="参数列表"></el-bread-crumb>

    <!-- 卡片 -->
    <el-card-comon>
      <template>
        
        <!-- el-Alert组件提示 -->
         <el-alert title="注意只允许第三级分类设置相关参数!" :closable="false" type="warning" show-icon/>

        <!-- 选择分类、级联选择框 -->
        <el-row>
          <el-col>
            <span>选择商品分类:</span>
            <el-cascader
            v-model="selectorArray"
            :options="goodsOptionArray"
            :props="goodOptionProps"
            clearable 
            ref="cascaderRef"
            @change="goodOptionChange"/>
          </el-col>
        </el-row>

        <!-- Tabs标签页 -->
        <goods-option-tabs ref="goodOptionTabsRef" :selectorArray="selectorArray" :autoListArray="autoListArray" :staticListArray="staticListArray"/>

      </template>
    </el-card-comon>
    
  </div>
</template>

<script>
// 组件
import ElBreadCrumb from '@/components/common/ElBreadCrumb';
import ElCardComon from '@/components/common/ElCardComon';
import GoodsOptionTabs from '@/views/Main/goods_manage/goods_options/GoodsOptionTabs';

// 网络
import { getGoodOptionList, getGoodOptionDataList } from '@/network/goodOptionRequest';

export default {
  data() {
    return {
      goodsOptionArray: [], // 所有一二三等级的数组列表
      selectorArray: [], // 级联选择框选中的数组
      goodOptionProps: {
        label: 'cat_name', // 显示
        value: 'cat_id', // 保存进数组的值(id)
        children: 'children'
      },
      staticListArray: [], // 静态参数
      autoListArray: [], // 动态参数
    }
  },
  created() {
    this.getAllOptionListRequest();
    this.$bus.$on('getGoodOptionDataListRequest', this.getGoodOptionDataListRequest);
  },
  destroyed() {
    this.$bus.$off('getGoodOptionDataListRequest');
  },
  methods: {
    async getAllOptionListRequest() { // 获取所有1、 2、 3级节点
      const {meta, data} = await getGoodOptionList();
      if (meta.status !== 200) {
        console.log(meta);
        return this.$message.error(meta.msg);
      }
      
      this.goodsOptionArray = data;
      // console.log(this.goodsOptionArray);
      return;
    },
    goodOptionChange() { // 级联选择框发生改变触发
      // 重置静态、动态参数列表
      this.staticListArray = [];
      this.autoListArray = [];
      if (this.selectorArray.length !== 3) {
        return this.selectorArray = []; // 不等于三重置
      }

      this.getGoodOptionDataListRequest(); // 获取静态
    },
    async getGoodOptionDataListRequest() { // 根据tabs获取静态或动态参数列表
      const sel =  this.$refs['goodOptionTabsRef']._data.activeName; // 选中的动态 or 静态
      const id = this.selectorArray[2];
      const { data, meta } = await getGoodOptionDataList(id, { sel });
      if (meta.status !== 200) {
        console.log(meta);
        return this.$message.error(meta.msg);
      }

      // console.log(data);
      // 将字符串分割成数组, 为后面table展开项里的tag标签for循环渲染
      data.forEach(item => {
        item.attr_vals = item.attr_vals === '' ? [] : item.attr_vals.split(' ');
        item.inputVisible = false; // 为后面的tag - input组件每一项上天添加一个控制属性
        item.inputValue = ''; // 默认空的tag - input双向数据绑定属性
      })
      // 放入静态、动态属性内
      if (!data[0]) { return }
      if (data[0].attr_sel === "only") {
        return this.staticListArray = data;
      } else if (data[0].attr_sel === "many") { // 数组为空 或 attr_sel
        return this.autoListArray = data;
      } 
    }
  },
  computed: {

  },
  components: {
    ElBreadCrumb,
    ElCardComon,
    GoodsOptionTabs
  }
}
</script>

<style lang="scss" scoped>
  .el-alert{
    margin-bottom: 30px;
  }
  .el-cascader {
    margin-left: 20px;
    margin-bottom: 20px;
  }
</style>